Skip to main content

Playlist Player

Adding the Collection Playback Widget​

This will playback the playlist's content in the player.

Get Started​

Step 1: Add the following HTML into the body section of your web application code to add Playlist Player widget.

<vdz-mashup-playlist id="playlist-player" data-widget='true'> </vdz-mashup-playlist>

Note: Make sure data-widget is set to 'true' as this applies the VIDIZMO default styling to the widget.

Input properties for Playlist Player Widget​

PropertyTypeDefaultRequiredDescription
mashup-idstring-YesId corresponding to a unique mashup in user portal
selected-mashup-idstring-NoWhen provided playlist player will start from the mashup whose id is provided
show-playlist-itemsboolean-NoIf this property is set to true, the player will show list button in control bar

Add Playlist Player Widget methods​

Step 2: Add the following method into the body section of your web application code by making a function inside the script tags to call widget methods. A sample method can be seen as follows

// to collapse player's slider
function isFullScreen() {
    document.getElementById('playlist-player').isFullScreen();
}
// to expand player's slider
function showListItems() {
    document.getElementById('playlist-player').showListItems();
}

Other available methods are listed below.

Methods for Playlist Player Widget​

MethodParametersReturn TypeDescription
isFullScreen-voidReturns true, if the playlist player is in full screen
showListItems-voidChange playlist list visibility to true
hideListItems-objectChange playlist list visibility to false
isListVisible-booleanReturns true, if playlist list is visible
playPlaylistItemmashupIdobjectPlay the playlist’s mashup whose id is provided

Call Collection Player Widget methods​

Step 3: Add the following Script tag into the body section of your web application code to bind the events and see these events in the console.


<script>
    
    document.getElementById('collection-player').addEventListener('on-initialized', evt => {
            console.log(evt.type + ':', evt.detail);
    });

    document.getElementById('collection-player').addEventListener('on-mashup-loading', evt => {
            console.log(evt.type + ':', evt.detail);
    });

    document.getElementById('collection-player').addEventListener('on-mashup-not-found', evt => {
            console.log(evt.type + ':', evt.detail);
    });

</script>

Other available events can be found below.

Output Events for Collection Player Widget​

Event NameEvent DataTypeScenario
on-mashup-loadingsearchCriteriaobjectWhen content search call is being sent to server, search criteria is received as event data.
on-mashup-loadedmashupInfoobjectWhen content search call is successful, mashupInfo of fetched mashup is received as event data.
on-mashup-loading-failederrorHttpErrorResponseWhen content search call has failed, error info is received as event data.
on-mashup-not-foundsearchCriteria-When content search call couldn't find any mashup against search criteria.
on-password-required--When content is protected by password. When this event is raised, a form will be shown on screen where the user will be able to enter password.
on-password-validatedvalidationStatusbooleanWhen password validation process has been completed.
on-initialized--This will be raised when the player has loaded.
on-errorerrorobjectRaised when error occurs in video player
on-fullscreen-changedisFullScreenbooleanWhen the player goes into or exits from full screen, this event is raised.
on-playlist-item-changedmashupIdnumberWhen playlist item has been changed, mashup id of next media to be played is received as event data
on-completedmashupIdnumberWhen collection item has been changed, this event is raised.
on-playlist-completedmashupIdnumberWhen the playlist last item has been played, this event will be raised

Sample Code​

<html>
    <head>
        <meta charset="UTF-8" />
        <!-- VIDIZMO Imports -->
        <script
            type="text/javascript"
            src="https:/wahajulhaq.beta.vidizmo.com/static/js/vidizmo-player/player.js"
        ></script>
        <link
            rel="stylesheet"
            href="{portal-address}/static/compiled/widget/widgets.css"
        />
        <script
            type="text/javascript"
            src="{portal-address}/static/compiled/widget/widgets.js"
        ></script>
    </head>

    <body style="margin: 20px">
        <vdz-mashup-playlist
            id="playlist-player"
            data-widget="true"
            mashup-id="{mashup-id}"
        >
        </vdz-mashup-playlist>

        <script>
            document
            .getElementById('playlist-player')
        .addEventListener('on-mashups-loading', (event) => {
                console.log(event);
            console.log('onMashupLoading');
        });
            document
            .getElementById('playlist-player')
        .addEventListener('on-mashups-loaded', (event) => {
                console.log(event);
            console.log('onMashupLoaded');
        });
            document
            .getElementById('playlist-player')
        .addEventListener('on-mashups-loading-failed', (event) => {
                console.log(event);
            console.log('onMashupLoadingFailed');
        });
        </script>
    </body>
</html>